<template>
  <div id="app">
    <header>
      <img src="https://photo.kkgold.com/photoserver/photo/2018/05/07/d75e3324-99e9-4854-94ca-cfc9a9353fad.jpg">
    </header>
    <ul class="price">
      <li>{{title}}</li>
      <li>
        <em>¥</em>{{price}}
        <span>(实时{{idTxt}}价)</span>
      </li>
      <li>最高价：<span>¥{{maxPrice}}</span> 最低价：<span>¥{{minPrice}}</span></li>
      <li>
        <!--市场价：<span>¥37167.00</span> 商城价：<span>¥28446.00</span>-->
        预付款：
        <span>¥{{advance}}</span>
        手续费：<span>¥{{service}}</span>
      </li>
    </ul>
    <div class="specification">
      <div>
        <span>规</span>格：
      </div>
      <ul>
        <li
          v-for="(item,index) in specificationData"
          :key="`specification${index}`"
          @click="_specificationHandler(index)"
          :class="{'active':specificationIndex == index}"
        >{{item}}
        </li>
      </ul>
    </div>
    <div class="specification">
      <div>批量购买：</div>
      <ul>
        <li
          v-for="(item, index) in wholesaleData"
          :key="`wholesale${index}`"
          @click="_wholesaleHandler(index)"
          :class="{'active':wholesaleIndex == index}"
        >{{item}}件
        </li>
      </ul>
    </div>
    <div class="specification amount">
      <div>
        <span>数</span>量：
      </div>
      <ul>
        <li @click="_sub">-</li>
        <li>
          <input type="text" v-model="amount">
        </li>
        <li @click="_add">+</li>
      </ul>
    </div>
    <footer>
      <ul>
        <li>
          <router-link to="/">
            <i>
              <img src="../../assets/images/home.png" alt>
            </i>
            <span>首页</span>
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <i>
              <img src="../../assets/images/service.png" alt>
            </i>
            <span>客服</span>
          </router-link>
        </li>
        <li>
          <a  @click="_passParameter">预付款</a>
        </li>
      </ul>
    </footer>
  </div>
</template>

<script>
  import  {localStorageSet} from '../../assets/js/localStorage'
  export default {
    name: "product-deatil",
    data() {
      return {
        specificationData: [],
        specification:'',//规格
        specificationIndex: 0,
        wholesaleData: [3, 5, 10],
        wholesaleIndex: -1,
        amount: 1,
        productPrice: [],
        productFree: [],
        advance: '加载中',
        service: '加载中',
        price: '加载中',
        productNoData:[],
        productNo:'',
        id: this.$route.params.id,
        maxPrice: '加载中',
        minPrice: '加载中',
        idTxt: '金',
        title: '足金999 发发金投资金条 100克',
      };
    },
    computed: {
      _specification() {
        return this.specificationData.length > 0
          ? this.specificationData[this.specificationIndex]
          : ""
      },
      _wholesale() {
        return this.wholesaleData.length > 0
          ? this.wholesaleData[this.wholesaleIndex]
          : ""
      }
    },
    mounted() {
      this.websocket()
    },
    methods: {
      _specificationHandler(index) {
        this.specificationIndex = index
        this.advance = this.productPrice[index]
        this.service = this.productFree[index]
        this.specification = this.specificationData[index]
        this.productNo = this.productNoData[index]
      },
      _wholesaleHandler(index) {
        this.wholesaleIndex = index
        this.amount = this._wholesale
      },
      _add() {
        this.amount++
      },
      _sub() {
        if (this.amount == 0) {
          return;
        }
        this.amount--
      },
      _productInformation() {
        let _this = this
        this.$http.post('/api/product/findByName', {
          productName: _this.id,
        })
          .then(function (response) {
            // console.log(response);
            let data = response.data.data
            if (response.data.rc == 200) {
              _this.advance = data[0].productPrice
              _this.service = data[0].productFree
              _this.productNo = data[0].productNo
              for (var i = 0; i < data.length; i++) {
                _this.specificationData.push(data[i].productSpecification + data[i].productUnit)
                _this.productPrice.push(data[i].productPrice)
                _this.productFree.push(data[i].productFree)
                _this.productNoData.push(data[i].productNo)
              }
              _this.specification = _this.specificationData[0]
            }
          })
          .catch(function (error) {
            console.log(error);
          });

      },
      websocket() {
        const wsuri = "ws://192.168.1.150:8060/websocket/quote";
        this.websock = new WebSocket(wsuri);//这里面的this都指向vue
        this.websock.onopen = this.websocketopen;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
        this.websock.onerror = this.websocketerror;
      },
      websocketopen() {
        console.log("WebSocket连接成功")
      },
      websocketonmessage(e) {
        this.marketDta = e.data.split(",");
        if (this.id == this.marketDta[4]) {
          this.price = this.marketDta[5]
          this.maxPrice = Number(this.marketDta[10]).toFixed(3)
          this.minPrice = Number(this.marketDta[11]).toFixed(3)
        }
        if (this.id == "AU") {
          this.idTxt = "金"
          this.title = "足金999 发发金投资金条 100克"
        } else {
          this.idTxt = "银"
          this.title = "足金999 发发金投资银条 100克"
          this.maxPrice = Number(this.maxPrice).toFixed(4)
          this.minPrice = Number(this.minPrice).toFixed(4)
        }
      },
      websocketclose() {
        console.log("WebSocket关闭");
      },
      websocketerror() {
        console.log("WebSocket连接失败");
      },
      _passParameter(){
        let params = {
          title:this.title,
          specification:this.specification,
          advance:this.advance,
          service:this.service,
          amount:this.amount,
          price:this.price,
          productNo:this.productNo
        }
        localStorageSet('productInfoData',params)
        this.$router.push('/advance' )
      }
    },
    created() {
      this._productInformation()
    }
  };
</script>

<style lang="less" scoped>
  #app {
    .price {
      padding: 0 0.5rem;
      li {
        line-height: 1.386rem;
        &:nth-of-type(1) {
          font-size: 0.81rem;
          font-weight: bold;
        }
        &:nth-of-type(2) {
          font-size: 1rem;
          color: #ff3b30;
          em {
            font-size: 0.64rem;
          }
          span {
            font-size: 0.512rem;
            color: #707070;
          }
        }
        &:nth-of-type(3) {
          font-size: 0.469rem;
          color: #707070;
          span {
            &:nth-of-type(1) {
              margin-right: 0.6rem;
            }
          }
        }
        &:nth-of-type(4) {
          font-size: 0.469rem;
          color: #707070;
          span {
            &:nth-of-type(1) {
              margin-right: 0.35rem;
            }
            &:nth-of-type(3) {
              color: #ff9500;
            }
          }
        }
      }
    }
    .specification {
      padding: 0 0 0 0.5rem;
      margin-top: 0.5rem;
      display: flex;
      div {
        font-size: 0.512rem;
        flex: 1.8;
        line-height: 1.32rem;
        span {
          letter-spacing: 2em;
        }
      }
      ul {
        flex: 8.2;
        li {
          float: left;
          font-size: 0.554rem;
          background: #f6f6f6;
          border-radius: 5px;
          margin: 0 0.6rem 0.5rem 0;
          width: 2.56rem;
          text-align: center;
          line-height: 1.32rem;
          &.active {
            background: #ffdfb2;
            color: #ff5400;
          }
        }
      }
    }
    .amount {
      ul {
        li {
          border-radius: 25px;
          input {
            width: 100%;
            height: 1.32rem;
            border: 0;
            text-align: center;
            background: #f6f6f6;
            border-radius: 5px;
            outline: none;
          }
        }
      }
    }
    footer {
      width: 100%;
      max-width: 750px;
      height: 50px;
      position: fixed;
      bottom: 0;
      border-top: 1px solid #ededed;
      box-sizing: border-box;
      background: #fff;
      ul {
        display: flex;
        width: 100%;

        li {
          float: left;
          padding: 6px 0;
          &:nth-of-type(1) {
            flex: 2.5;
            a {
              margin-left: 1.2rem;
            }
          }
          &:nth-of-type(2) {
            flex: 2.5;
            a {
              margin-left: -1.2rem;
            }
          }
          &:nth-of-type(3) {
            flex: 5;
            padding: 0;
            background: #ff9500;
            line-height: 50px;
            text-align: center;
            font-size: 0.597rem;
            a {
              color: #fff;
            }
          }
          a {
            display: block;

            i {
              display: block;
              height: 22px;
              width: 22px;
              margin: auto;
            }

            span {
              display: block;
              height: 18px;
              line-height: 20px;
              color: #000;
              font-size: 12px;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>
